<template>
  <div style="margin-left: 25px;margin-top: 25px;">
    <div class="left" style="float: left;">
      <img  style="position: absolute;width: 150px;margin: 25px 25px;" src="../assets/img.png" @click="toHomePage()" alt>
      <img style="width: 900px;margin: 25px 25px;" src="../assets/bg.png" alt>
    </div>
    <div class ="right" style="float: left;margin-left: -25px;">
    <el-form style="box-shadow:2px 2px 2px 2px rgba(0.1, 0.1, 0.1, 0.1);width: 450px;height: auto;background-color: white;">
      <h2><span style="text-align: center;display: block;padding-top: 25px;">注册账号</span></h2>
      <el-form-item prop="email">
        <el-input class="input0" type="username" v-model="registerForm.username" placeholder="请输入邮箱/手机号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input class="input0 close" v-model="registerForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input class="input0 close" v-model="registerForm.rePassword" placeholder="请再次输入密码确认"></el-input>
      </el-form-item>
      <el-form-item prop="chooseIdentity" style="margin-top: -25px;">
        <p class="font-bold font16">选择身份</p>
        <el-radio-group v-model="registerForm.radio0"  style="margin-top: -25px;margin-left: 21px;">
          <el-radio-button class="radio" label="老师"><div style="width: 137px;"><img src="../assets/teacher.png">老师</div></el-radio-button>
          <el-radio-button class="radio" label="学生" style="margin-left: -22px;"><div style="width: 137px"><img src="../assets/student.png">学生</div></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="name">
        <el-input class="input0" v-model="registerForm.name" style="margin-top: 25px;" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item prop="school">
        <el-input class="input0 close" v-model="registerForm.school" placeholder="请输入学校/机构"></el-input>
      </el-form-item>
      <el-form-item>
        <div id="stuID" v-if="registerForm.radio0 === '学生'" style="display: block"><el-input class="input0 close" v-model="registerForm.stuID" placeholder="请输入学号"></el-input></div>
      </el-form-item>
      <el-form-item prop="captcha">
        <el-input  v-model="answer" type="text" style=" width: 180px;height: 45px;margin-left: 40px;margin-top:-25px;display: block;float: left;" placeholder="请输入计算结果"></el-input>
        <div class="verify" @click="generateQuestion">&nbsp&nbsp{{num1}}&nbsp&nbsp{{operator}}&nbsp&nbsp{{num2}}=</div>
      </el-form-item>
      <el-form-item prop="password">
        <el-button class="input0 close" style="background-color:#2c91d0;color: white;" @click="register()">注册</el-button>
      </el-form-item>
      <el-form-item class="close" style="text-align: right;display: block;margin-right: 25px;">已有账号？<a href="/login" style="text-decoration: none;color: blue;">去登录</a></el-form-item>
    </el-form>
    </div>
    <br>
  </div>

</template>

<script>
import axios from "axios";
  export default {
    name: "register",
    data(){
      return {
        registerForm: {
          username: '',
          password: '',
          rePassword: '',
          radio0:'老师',
          name:'',
          school: '',
          stuID: '',
        },
        num1: null,      //数字一
        num2: null,      //数字二
        operator: null, //操作符
        answer: null,   //用户输入
        result: false   // 验证结果
      }
    },
    methods:{
      toHomePage(){
        this.$router.push("/homePage")
      },
      register(){
        let url = 'register';
        if(this.registerForm.radio0 === '老师'){
          url = 'registerT';
        }
        this.checkAnswer()
        if(this.result) {
          axios
            .post(url, {
              "username": this.registerForm.username,
              "password": this.registerForm.password,
              "rePassword": this.registerForm.rePassword,
              "identity": this.registerForm.radio0,
              "name": this.registerForm.name,
              "school": this.registerForm.school,
              "stuId": this.registerForm.stuID,
            })
            .then(response => {
              console.log(response.data)
              if (response.data.code === 200) {
                this.$message.success("注册成功!");
                this.$router.push("/login");
              } else {
                alert("输入信息有误!")
              }
            })
            .catch(function (error) {
              console.error();
            });
        }else{
          this.$message.error("验证码输入错误!")
        }
      },
      generateQuestion(){    //生成计算题
        this.num1 = Math.floor(Math.random() * 10) + 1;
        this.num2 = Math.floor(Math.random() * 10) + 1;
        let a = Math.random();
        if(a <= 0.33){
          this.operator = "加";
        }else if(a <= 0.66){
          this.operator = "减";
        }else{
          this.operator = "乘";
        }
      },
      checkAnswer(){
        let correctAnswer;
        if(this.operator === "加"){
          correctAnswer = this.num1 + this.num2;
        }else if(this.operator === "减"){
          correctAnswer = this.num1 - this.num2;
        }else if(this.operator === "乘"){
          correctAnswer = this.num1 * this.num2;
        }
        this.result = parseInt(this.answer) === correctAnswer;
        this.generateQuestion();
      }
    },

    mounted() {
      this.generateQuestion();
    }
  }
</script>
<style scoped>
.close{
  margin-top: -10px;
}
.input0{
  width: 360px;height: 48px;
  display: block;
  margin-left: 40px;
}
.font-bold{
  font-weight: bold;
}
.font16{
  font-size:16px;
  margin-left: 40px;
}
.radio{
  width: 180px;
  height: 30px;
  margin: 10px 20px;
}
.verify{
  border:1px solid blue;
  border-radius: 10px;
  width: 160px;height:45px;
  float: left;
  margin-left: 25px;
  margin-top: -25px;
  font-weight: bold;
  font-size: 25px;
  color: green;
  text-align: center;
}
</style>
